<template>
  <view class="container">
    <view class="container__header">
      <!--tabs切换-->
      <u-tabs :current="currentTab" :list="tabs" @click="clickTab" :scrollable="false"></u-tabs>
    </view>
    <view class="container__list">
      <view class="container__list__item" v-for="(item, index) in list" :key="index" @click.stop="handleDetail(item)">
        <view class="container__list__item__head">
          <view class="container__list__item__title">{{ item.premisesAddress }}
          </view>
          <view class="container__list__item__status" :style="{ color: stateObject('estimationFlag').color }"
                v-if="item.workOrderState=== '6'&&item.estimationFlag === '1'">
            {{ stateObject('estimationFlag').name }}
          </view>
          <view class="container__list__item__status" :style="{ color: stateObject(item.workOrderState).color }" v-else>
            {{ stateObject(item.workOrderState).name }}
          </view>
        </view>
        <view class="container__list__item__body">
          <view class="container__list__item__body__item">
            <view class="container__list__item__body__item__title">预约人：</view>
            <view class="container__list__item__body__item__content">{{ item.contactsName?item.contactsName:'' }}
            </view>
          </view>
          <view class="container__list__item__body__item">
            <view class="container__list__item__body__item__title">手机号：</view>
            <view class="container__list__item__body__item__content">{{ item.contactsPhone?item.contactsPhone:'' }}
            </view>
          </view>
          <view class="container__list__item__body__item">
            <view class="container__list__item__body__item__title">预约时间：</view>
            <view class="container__list__item__body__item__content">{{ item.appointmentTime?item.appointmentTime:'' }}
            </view>
          </view>
          <view class="container__list__item__body__item">
            <view class="container__list__item__body__item__title">期望入住时间：</view>
            <view class="container__list__item__body__item__content">
              <dict-tag :options="dict.type.expect_check_in_type" :value="item.expectCheckInType"></dict-tag>
            </view>
          </view>
        </view>
        <view class="container__list__item__foot">
          <!--     状态：待派单、待接单、已接单      -->
          <template v-if="['1', '2', '3'].includes(item.workOrderState)">
            <button class="footer-button" size="small" @click.stop="handleEdit(item)">修改预约</button>
            <button class="footer-button" size="small" @click.stop="handleCancel(item)">取消预约</button>
          </template>
          <!--     状态：已完成       -->
          <template v-if="['6'].includes(item.workOrderState)">
            <button class="footer-button" size="small" @click.stop="handleEvaluate(item)"
                    v-if="item.estimationFlag === '0'">评价
            </button>
          </template>
          <!--     状态：已取消       -->
          <template v-if="['7'].includes(item.workOrderState)">
            <button class="footer-button" size="small" @click.stop="handleDelete(item)">删除</button>
          </template>
          <button class="footer-button" size="small" @click.stop="handleDetail(item)">预约详情</button>
        </view>
      </view>
      <!-- 列表为空提示 -->
      <view class="container__list__tips" v-if="!loading && list.length === 0">
        <text>暂无数据</text>
      </view>
      <!-- 列表底部提示 -->
      <view class="container__list__tips" v-if="!loading && list.length&&list.length == total">
        <text>没有更多了</text>
      </view>
      <!-- 加载中提示 -->
      <view class="container__list__tips" v-if="loading">
        <u-loading-icon :show="true"></u-loading-icon>
      </view>
    </view>
    <!-- 底部操作按钮 -->
    <view class="container__footer">
    </view>
  </view>
</template>

<script>
import {stateMapping, maintenanceTypeMapping} from "./commonData/index";
import {listWorkOrder, deleteWorkOrder} from "@/api/manager/workOrder";
import storage from "@/utils/storage";
import constant from "@/utils/constant";

export default {
  name: "list",
  dicts: ['work_order_state','expect_check_in_type'],
  data() {
    return {
      loading: false,
      // 当前tabs索引
      currentTab: 0,
      // tabs数据
      tabs: [
        {
          name: '全部',
          value: null
        },
        {
          name: '待接单',
          value: '2'
        },
        {
          name: '已接单',
          value: '3'
        },
        {
          name: '已完成',
          value: '6'
        },
        {
          name: '已取消',
          value: '7'
        }
      ],
      // 列表数据
      list: [],
      // 查询参数
      queryParam: {
        pageNum: 1, // 页码
        pageSize: 10,// 每页条数
        houseId: null, // 房屋ID
        workOrderState: null, // 状态
        params: {
          maintenanceType: null // 维修类型
        },
        workOrderType: '3' // 工单类型 1维修工单 2清洁工单 3带看工单
      },
      // 列表总数
      total: 0

    };
  },
  computed: {
    stateObject() {
      return (workOrderState) => {
        let obj = stateMapping.find(item => item.workOrderState === workOrderState);
        return obj ? obj : {};
      }
    },
    maintenanceTypeMapping() {
      return (value) => {
        let obj = maintenanceTypeMapping.find(item => item.value === value);
        return obj ? obj.label : '';
      }
    }
  },
  onShow() {
    this.initData()
  },
  // 页面滚动到底部
  onReachBottom() {
    if (!this.loading && this.list.length < this.total) {
      this.queryParam.pageNum++;
      // 接口请求数据
      this.getList();
    }
  },
  methods: {
    initData() {
      this.queryParam.pageNum = 1;
      this.getList();
    },
    // tabs点击事件
    clickTab(data) {
      // if (data.value === null) { //全部
      //   this.queryParam.workOrderState = null;
      //   this.queryParam.params.workOrderState = null;
      // } else if (data.value === '1') { //未完成
      //   this.queryParam.workOrderState = null;
      //   this.queryParam.params.workOrderState = '1';
      // } else if (data.value === '2') { //已完成
      //   this.queryParam.workOrderState = null;
      //   this.queryParam.params.workOrderState = '2';
      // } else if (data.value === '3') { //待缴费
      //   this.queryParam.workOrderState = '5';
      //   this.queryParam.params.workOrderState = null;
      // }
      this.queryParam.workOrderState = data.value;
      this.initData()
    },
    // 获取列表数据
    getList() {
      this.loading = true;
      // 接口请求数据
      listWorkOrder(this.queryParam).then(res => {
        // 初始加载
        if (this.queryParam.pageNum === 1) {
          this.list = res.rows;
        } else if (this.queryParam.pageNum > 1 && this.total > this.list.length) {
          // 加载更多
          this.list = this.list.concat(res.rows)
        }
        this.total = res.total;
        this.loading = false;
      })
    },
    // 详情页
    handleDetail(item) {
      console.log('详情页', item);
      // 跳转到详情页
      this.$tab.navigateTo('./detail?workOrderId=' + item.workOrderId)
    },
    // // 申请报修
    // handleAdd() {
    //   console.log('申请报修');
    //   this.$tab.navigateTo('./add')
    // },
    // 修改预约
    handleEdit(item) {
      console.log('修改预约');
      console.log('item', item)
      this.$tab.navigateTo('./add?workOrderId=' + item.workOrderId)
    },
    // 取消预约
    handleCancel(item) {
      console.log('取消预约');
      let data = JSON.stringify(item);
      this.$tab.navigateTo('./cancel?data=' + data)
    },
    // // 立即缴费
    // handlePay(item) {
    //   console.log('立即缴费');
    //   this.$tab.navigateTo('./pay?workOrderId=' + item.workOrderId)
    // },
    // 评价
    handleEvaluate(item) {
      console.log('评价');
      this.$tab.navigateTo('./rate?workOrderId=' + item.workOrderId)
    },
    // 删除
    handleDelete(item) {
      uni.showModal({
        title: '确认删除',
        content: '确定删除该工单？',
        success: (res) => {
          if (res.confirm) {
            deleteWorkOrder(item.workOrderId).then(res => {
              if (res.code === 200) {
                uni.showToast({
                  title: res.msg || '删除成功',
                  icon: 'none',
                })
                // 删除成功处理列表
                let index = this.list.findIndex(item1 => item1.workOrderId === item.workOrderId);
                this.list.splice(index, 1);
              }
            })
          } else if (res.cancel) {
            console.log('取消删除')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  .container__header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
    height: 80rpx;
  }

  .container__list {
    padding: 20rpx 20rpx 40px;

    .container__list__item {
      background: #fff;
      padding: 20rpx;
      border-bottom: 1px solid #eee;
      margin-bottom: 20rpx;

      .container__list__item__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        font-size: 32rpx;
        border-bottom: 1px solid #eee;

        .container__list__item__title {
          color: #333;
        }

        .container__list__item__status {
          color: #999;
        }
      }

      .container__list__item__body {
        padding: 20rpx 0;
        margin-top: 10rpx;
        border-bottom: 1px solid #eee;

        .container__list__item__body__item {
          margin-bottom: 10rpx;
          display: flex;

          .container__list__item__body__item__title {
            font-size: 28rpx;
            color: #333;
            min-width: 150rpx;
          }

          // 两行显示，超过省略
          .container__list__item__body__item__content {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 3.0em; /* 设置为行高的两倍 */
            line-height: 1.5em; /* 这里的行高应与后面p标签中的行高一致 */
            font-size: 28rpx;
            color: #666;
            margin-top: 5rpx;
          }

          .container__list__item__body__item__tips {
            font-size: 28rpx;
            color: #999;
            margin-top: 10rpx;
          }
        }
      }

      .container__list__item__foot {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 20rpx 0;
        border-top: 1px solid #eee;

        .footer-button {
          width: 160rpx;
          margin: 0 0 0 20rpx;
          font-size: 24rpx;
          border: 1rpx solid #eee;
          background: #fff;

          &:first-child {
            margin-left: 0;
          }

          &:active {
            background: #eee;
          }
        }
      }
    }

    .container__list__tips {
      text-align: center;
      font-size: 32rpx;
      color: #999;
      margin: 40rpx 0;
    }
  }

  .container__footer {
    width: 100vw;
    padding: 20rpx;
    position: fixed;
    bottom: 0;
    z-index: 999;
  }
}

</style>
